<template>
	<view>
		<view >
			<text class = "c">武汉第一中学</text>
		</view>
		<view class = "d"></view>
		<view class = "high">
			<text class = "e">队长信息</text>
		</view>
		<view>
			<uni-card :is-shadow="false" class = "h"  >
				<img src = "/static/renwu1.jpg"  class = "g"></img>
				<text class = "i">陈婉仪</text>
				<text class = "woman">♀</text>
				<text class = "number">202011090890</text>
				<text class = "xueyuan">计算机学院</text>
				<div class = "dev">
					<text class = "word">📞拨打电话</text>
				</div>
			</uni-card>
		</view>
		<view class = "uu">
			<view class = "d"></view>
			<view class = "high">
				<text class = "e">队员信息</text>
			</view>
		</view>
		<uni-card :is-shadow="false" class = "duiyaun" >
			<view class = "ki">
				<img src = "/static/renwu2.jpg" class = "g">
				<text class = "zi" >张晓玥</text>
				<text class = "man">♂</text>
				<view class="hr"></view>
			</view>
			<view class = "ji">
				<img src = "/static/renwu3.jpg" class = "g">
				<text class = "zi" >张晓玥</text>
				<text class = "man">♂</text>
				<view class="hr"></view>
			</view>
			<view class = "ji">
				<img src = "/static/renwu4.jpg" class = "g">
				<text class = "zi" >张晓玥</text>
				<text class = "man">♂</text>
				<view class="hr"></view>
			</view>
			<view class = "ji">
				<img src = "/static/renwu5.jpg" class = "g">
				<text class = "zi" >张晓玥</text>
				<text class = "man">♂</text>
			</view>
		</uni-card>
		<view class = "uu">
			<view class = "d"></view>
			<view @click="si">
				<text class = "e">活动照片</text>
			</view>
		</view>
		<view class = "zhaopian">
			<uni-card :is-shadow="false" class = "huodong">
				<view v-if="ii.rr.length === 0" >
					<button class = "shy" @click = "stand">
						<text class = "scwo">
							选择照片
						</text>
					</button>
				</view>
				<view v-else>
					<view id = "shang"  v-model="d" @click = "st" :style="{ color: textColor }"  >{{d}}</view>
					<view class = "con" >
						<view  class = 'image-container' v-for="(image, index) in ii.rr" :key="index" :style="boxStyle">
							<view   class = "con1" :style="borderStyle">
								<image :src="image" mode="aspectFill" class = "pic" @click="s"></image>
							</view>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
		<view class = "nn">
			<view class = "d"></view>
			<view  @click="qu">
				<text class = "e">其他附件</text>
			</view>
		</view>
		<uni-card :is-shadow="false" class = "fujian">
			<view v-if = "ii.ff.length === 0">
				<button class = "shc" @click = "stander">
					<text class = "scwo">
						上传文件
					</text>
				</button>
			</view>
			<view v-else>
				<view id = "shang"  v-model="m"  @click = "st" :style="{ color: textColor1 }"  >{{m}}</view>
				<view v-for = "(item,index) in ii.ff" :key = "index">
					<uni-card @click = "p"> class = "ll">{{item}}</uni-card>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script setup>
import { onMounted } from 'vue'
import {ref} from "vue"
import { onLoad } from '@dcloudio/uni-app'
let m = ref("上传");
let d = ref("上传");
let textColor = "blue"
let textColor1 = "blue"
let s = function(){
	d.value = "审核中";
	// 使用setTimeout设置延时
	setTimeout(() => {
		// 更改文字
		d.value = "已超过限制，请联系管理员"
		// 更改颜色
		textColor = "red"
	}, 2000); // 延时3秒

}
let st = function(){
	uni.navigateTo({
		url:'/pages/Student-captain/reason/rejection-reason'
	})
}

let si = function(){
	setTimeout(() => {
		// 更改文字
		d.value = "审核拒绝>"
		// 更改颜色
		textColor = "red"
	}, 2000); // 延时3秒
}

let qu = function(){
	setTimeout(() => {
		// 更改文字
		m.value = "审核拒绝>"
		// 更改颜色
		textColor1 = "red"
	}, 2000); // 延时3秒
}

let p = function(){
	m.value = "审核中";
	// 使用setTimeout设置延时
	setTimeout(() => {
		// 更改文字
		m.value = "已超过限制，请联系管理员"
		// 更改颜色
		textColor1 = "red"
	}, 2000); // 延时3秒
}
let stand = function(){
	uni.navigateTo({
		url:'../upload/photo'
	})
}
let stander = function(){
	uni.navigateTo({
		url:`../upload/annex?ima=${encodeURIComponent(JSON.stringify(ii.value.rr))}`
	})
}
let re = ref([])
let ge = ref([])
let ii = ref({
	rr:[],
	ff:[]
});
console.info(222222222)
onLoad((option)=>{
	console.info(111111111)
	if (option.imageList) {
		console.info(1111)
		const imageList = JSON.parse(decodeURIComponent(option.imageList))
		ii.value.rr = imageList
	}
	// 检查是否传递了filePaths（注意参数名可能不同，这里假设是filePaths）
	if (option.fileP) { // 注意：这里我假设参数名是filePaths，根据实际情况调整
		const filePaths = JSON.parse(decodeURIComponent(option.fileP))
		console.log(filePaths)
		ii.value.rr.push(filePaths._value.vv)
		ii.value.ff.push(filePaths._value.ggo)
		console.log(filePaths._value.vv)
		console.log(filePaths._value.ggo)
		console.log(ii.value.rr)
		console.log(ii.value.ff)
	}
})
</script>

<style scoped>
.c{
	position: relative;
	top:20px;
	left:12px;
	font-family: PingFangSC-Medium;
	font-weight: 950;
	font-size: 16px;
	color: #212121;
}
.d{
	position: relative;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #166AFF;
	left:12px;
	top:40px
}
.e{
	position: relative;
	width: 48px;
	height: 17px;
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 12px;
	color: #6E6E6E;
	text-align: center;
	left: 20px;
	top: 26px
}
.high{
	height: 40px;
}
.h{

	height: 95px;
	background: #FFFFFF;
	box-shadow: 0 2px 5px 0 #E2E4EB;
	border-radius: 10px;
}
.g{
	position: relative;
	width: 30px;
	height: 30px;
	border: 0 solid #FFFFFF;
	border-radius: 50%;
	left: -10px
}
.i{
	position: relative;
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 15px;
	color: #212121;
	text-align: center;
	top:-15px
}
.woman{
	font-size: 12px;
	font-weight: 10000;
	position:relative;
	color: #FF9494;
	top: -17px;
	left: 5px
}
.number{
	position: relative;
	width: 103px;
	height: 21px;
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 15px;
	color: #212121;
	text-align: center;
	top:10px;
	left:-55px
}
.xueyuan{
	position:relative;
	top:35px;
	left:-160px;
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 15px;
	color: #212121;
}
.dev{
	width: 82px;
	height: 26px;
	background-image: linear-gradient(90deg, #02E26E 3%, #05CF67 97%);
	border-radius: 12px;
	margin-top: -15px;
	margin-left: 250px;
	text-align: center;
}
.word{
	position:relative;
	width: 48px;
	height: 17px;
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 12px;
	color: #FFFFFF;
	line-height: 26px;
}
.uu{
	margin-top: -40px;
}
.duiyaun{
	height: 215px;
	background: #FFFFFF;
	box-shadow: 0 2px 5px 0 #E2E4EB;
	border-radius: 10px;
	margin-bottom: 0px;
}
.hr{
	border-top: 0.5px solid #E4E8ED;
}
.zi{
	position:relative;
	width: 45px;
	height: 21px;
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 15px;
	color: #212121;
	text-align: center;
	top:-10px
}
.man{
	font-size: 12px;
	font-weight: 10000;
	position:relative;
	color:#166AFF;;
	top: -12px;
	left: 6px
}
.ki{
	margin-top: 5px;
	margin-bottom: 15px;
}
.ji{
	margin-top: 13px;
	margin-bottom: 15px;
}
.huodong{
	position: relative;
	height: 165px;
	background: #FFFFFF;
	box-shadow: 0 2px 5px 0 #E2E4EB;
	border-radius: 10px;
	top:20px
}
.img{
	position: relative;
	width: 326.6px;
	height: 120px;
	top:5px;
	left:-5px
}
#shang{
	Text-align: right;
	width: 100%;
	height: 17px;
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 12px;
}
.nn{
	margin-top: -20px;
}
.fujian{
	position: relative;
	height: 120px;
	background: #FFFFFF;
	box-shadow: 0 2px 5px 0 #E2E4EB;
	border-radius: 10px;
	top: 20px
}
.shc{
	position: relative;
	width: 100px;
	height: 30px;
	background: #166AFF;
	border-radius: 15px;
	top:22px
}
.scwo{
	position: relative;
	width: 48px;
	height: 17px;
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 12px;
	color: #FFFFFF;
	top: -8px
}
.anniu{
	height: 300px !important
}
.shy{
	position: relative;
	width: 100px;
	height: 30px;
	background: #166AFF;
	border-radius: 15px;
	top:60px
}
.con {
	/* #ifndef APP-NVUE */
	display: flex;
	box-sizing: border-box;
	/* #endif */
	flex-wrap: wrap;
	margin: -5px;
}
.image-container{
	position: relative;
	width: 33.33%;
	height: 0;
	padding-top: 33.33%;
	/* #ifndef APP-NVUE */
	box-sizing: border-box;
	/* #endif */
}
.con1{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 5px;
	border: 1px #eee solid;
	border-radius: 5px;
}
.pic{
	width: 100%;
	height: 100%;
}
</style>
